﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type='text/javascript' src='jquery-1.7.1-min.js'></script>
    <script type="text/javascript" src="jquery-ui-1.8.16-min.js"></script>
    <script type="text/javascript" src="jquery.jsPlumb-1.3.9-RC1.js"></script>

    <meta charset="utf-8" />
    <title></title>
    <style>
        .body
        { border-style: dotted ; border-width: 0.1pt; border-color:  #dedede
        
        }
        
    </style>

    <script type="text/javascript">
        function test() {
            // list of possible anchor locations for the blue source element
            var sourceAnchors = [
				[0, 1, 0, 1],
				[0.25, 1, 0, 1],
				[0.5, 1, 0, 1],
				[0.75, 1, 0, 1],
				[1, 1, 0, 1]
            ];

            jsPlumb.importDefaults({
                // set default anchors.  the 'connect' calls below will pick these up, and in fact setting these means
                // that you also do not need to supply anchor definitions to the makeSource or makeTarget functions.
                Anchors: [sourceAnchors, "TopCenter"],
                // drag options
                DragOptions: { cursor: "pointer", zIndex: 2000 },
                // default to blue at source and green at target
                EndpointStyles: [{ fillStyle: "#225588" }, { fillStyle: "#558822" }],
                // blue endpoints 7 px; green endpoints 11.
                Endpoints: [["Dot", { radius: 7 }], ["Dot", { radius: 11 }]],
                // default to a gradient stroke from blue to green.  for IE provide all green fallback.
                PaintStyle: {
                    gradient: { stops: [[0, "#225588"], [1, "#558822"]] },
                    strokeStyle: "#558822",
                    lineWidth: 10
                }
            });

            // make 'window1' a connection source.
            jsPlumb.makeSource("window1", {
                //anchor:sourceAnchors		// you could supply this if you want, but it was set in the defaults above.
            });

            // get the list of ".smallWindow" elements.  getSelector is just a helper method that abstracts out the underlying
            // library; you don't need to use it - you could use $(".smallWindow") in jquery, $$(".smallWindow") in
            // MooTools, or Y.all(".smallWindow") in YUI.
            //
            var smallWindows = jsPlumb.getSelector(".smallWindow");
            for (var i = 0; i < smallWindows.length; i++) {
                jsPlumb.draggable(smallWindows[i]);
                jsPlumb.makeTarget(smallWindows[i], {
                    //anchor:"TopCenter",				// you could supply this if you want, but it was set in the defaults above.
                    dropOptions: { hoverClass: "hover" }
                });
            }

            // and finally connect a couple of small windows, just so the demo doesnt look broken when it loads.
            // note that
            
            jsPlumb.connect({ source: "window1", target: "window2" });
        }
</script>


</head>
<body>
    <a href="javascript:test();">Go</a>
<div class="window" id="window1"><strong>Window 1</strong><br/><br/></div>
			<div class="window smallWindow" id="window2"><strong>Window 2</strong><br/><br/></div>

</body>
</html>